﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
	<c:set var="basePath" value="<%=request.getContextPath()%>"/>
	<!-- jsp文件头和头部 -->
	<jsp:include page="../common/common_head.jsp"/>
	<script type="text/javascript" src="${basePath}/js/base/log.js"></script>
	<script type="text/javascript" src="${basePath}/js/base/dialog.js"></script>
	<script type="text/javascript" src="${basePath}/js/sync/sync_list.js"></script>
	 <style>
            .table th, .table td { 
			text-align: center; 
			height:38px;
			}
        </style>
	</head> 
<body>


<div class="container-fluid" style="padding-top: 10px;">
    <div class="panel panel-primary">
        <%--<div class="panel panel-default">--%>
        <div class="panel-heading">
            <h3 class="panel-title">异构数据同步</h3>
        </div>
        <div class="panel-body" style="padding-bottom: 0px;">
           <form:form id="temListForm" action="${basePath}/sync/syncTemplateList.do" method="post" commandName="syncTemplate" class="form-horizontal" style="margin-bottom: 0">
            

                <div class="row">
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="templateName">模板名</label>
                            <div class="col-sm-10">
                                <form:input  path="templateName"  class="form-control" />
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="userName">用户名</label>
                            <div class="col-sm-10">
                                <form:input  path="userName" class="form-control" />
                            </div>
                        </div>
                    </div>

                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="tableName">表名</label>
                            <div class="col-sm-10">
                                <form:input  path ="tableName" class="form-control" />
                            </div>
                        </div>
                    </div>

                    
                </div>


                <div class="row">
                  <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="status">状态</label>
                            <div class="col-sm-10">
                                <form:select class="form-control"  path="status" items="${statusMap}" >
                                </form:select>         	
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for="dataSourceId">数据源</label>
                            <div class="col-sm-10">
				                  <form:select class="form-control" path="dataSourceId" items="${dsMap}" >
				                  </form:select>
                                
                            </div>
                        </div>
                    </div>

		
                </div>
                
                <div class="row">
	                <div class="col-xs-4">
		                 <div class="form-group">
					     <label for="sqlContent" class="col-sm-2 control-label">脚本内容</label>
						    <div class="col-sm-10">
						      <textarea name="sqlContent" id="sqlContent" class="form-control"></textarea>
						    </div>
					     </div>
	                </div>
	                
	                <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-sm-2 control-label " for=""></label>
                        
                            <div class="col-sm-10">
                                <form:button type="submit" class="btn btn-primary" style="width: 130px;" id=""> 查询</form:button>
                            </div>
                        </div>
                    </div>
                </div>
               
        </form:form>
        </div>
		
        <ul class="list-group">
            <div class="list-group-item">
          
                <button type="button" onclick="window.location.href='${basePath}/sync/editSyncTemplate.do'"  class="btn btn-success" id="">新增模板</button>
               
                <button type="button" onclick="exportTemplates('${basePath}')" class="btn btn-warning" id="">导出</button>
                                                
                <button type="button" onclick="deleteTemplates('${basePath}')"  class="btn btn-success" style="display: none">删除模板</button>
                
                <from enctype="multipart/form-data">
                <div class="col-xs-3 form-group pull-right">
                    <div class="input-group">
                        <div class="input-group-addon">导入</div>
                        <input id="input-4" type="file" name="upload" multiple class="file form-control" data-show-preview="false">
                        <script>
                        //$(function () {
                        	
                        	$("#input-4").fileinput({
                                showRemove: false,
                                uploadUrl:"${basePath}/sync/importTemplates.do",//上传的地址
                                uploadAsync: true,
                                language : "zh",//设置语言
                                showCaption: true,//是否显示标题
                                showUpload: true, //是否显示上传按钮
                                browseClass: "btn btn-primary", //按钮样式 
                                allowedFileExtensions: ["xml"], //接收的文件后缀
                                maxFileCount: 1,
                                showPreview: false,
                               
                                
                            }).on("fileuploaded", function(event, data) {
                            	alert(data.response.message);
								window.location.href="${basePath}/sync/syncTemplateList.do";
                               });
                        //});
                            
                            
                           
                        </script>
                    </div>
                </div>
                </from>
                
                
                
            </div>
        </ul>

        <table class="table table-bordered table-hover">
            <thead>
            <tr class="bg-primary">
						<th onclick="selectAll()">
						<input type="checkbox" id="zcheckbox" />
						</th>
						<th>序号</th>
						<th>编号</th>
						<th>模板名称</th>
						<th>数据源</th>
						<th>数据库用户名</th>
						<th>表名</th>
						<th>状态</th>
						<th>操作</th>
			</tr>
            </thead>
            <tbody>
           	<!-- 开始循环 -->	
				<c:choose>
					<c:when test="${not empty syncTemplatelist}">
						<c:forEach items="${syncTemplatelist}" var="syncTemplate" varStatus="vs">
									
							<tr>
								<td class='center' style="width: 30px;">
									<label><input type='checkbox' name='ids' value="${syncTemplate.templateId}"/><span class="lbl"></span></label>
<%-- 									<c:if test="${user.USERNAME == 'admin'}"><label><input type='checkbox' disabled="disabled" /><span class="lbl"></span></label></c:if>
 --%>								</td>
								<td class='center' style="width: 50px;">${vs.index+1}</td>
								<td>${syncTemplate.templateId }</td>
								<td>${syncTemplate.templateName }</td>
								<td>${syncTemplate.dataSourceId }</td>
								<td>${syncTemplate.userName }</td>
								<td>${syncTemplate.tableName }</td>
								<td>
								<c:if test="${syncTemplate.status == 'true'}">
								  	<input name="syncTemplate_status" type="checkbox" id="${syncTemplate.templateId }" value="${syncTemplate.status }" checked />
								
								</c:if>
								
								<c:if test="${syncTemplate.status == 'false'}">
									<input name="syncTemplate_status" type="checkbox" id="${syncTemplate.templateId }" value="${syncTemplate.status }"  />
									
								</c:if>
								
								
								<%-- <div class="switch" data-on="primary" data-off="info"></div>--%>
								
								</td>
								<td>
									<a href="javascript:void(0)" onclick="editTemplates('${basePath}',${syncTemplate.templateId });" class="btn btn-success btn-sm">修改</a>
				                    																		
									<a  class="btn btn-success btn-sm"  href="javascript:void(0)" onclick="getManagerList(${syncTemplate.templateId },0)">操作日志</a>
									
									<a  class="btn btn-success btn-sm" style="display: none"  href="${basePath}/sync/findSyncLogIndex?objectId=${syncTemplate.templateId }&objectType=SYNCTEMPLATE"  target="_blank">操作日志</a>
									
									<a href="${basePath}/sync/findSyncTriggerList.do?templateId=${syncTemplate.templateId }" class="btn btn-success btn-sm" >队列管理</a>
								</td>
							</tr>
						
						</c:forEach>
						
					</c:when>
					<c:otherwise>
						<tr class="main_info">
							<td colspan="10" class="center">没有相关数据</td>
						</tr>
					</c:otherwise>
				</c:choose>
				
            </tbody>
        </table>

        <div class="panel-footer">
        	
        	<div class="pagination" style="float: right;padding-top: 0px;margin-top: 0px;">${page.pageStr}</div>
             <div class="pagination" style="margin: 0px">
                
            </div>

            <div class="pagination pull-right" style="margin: 0px">
                
            </div>
            <br/>
            <br/>
        </div>
    </div>

                                
<!-- 上传jar -->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModal3Label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">上传jar</h4>
            </div>
            <div class="modal-body">
				<form id="jar_file"  class="form-horizontal" role="form" enctype="multipart/form-data">
				<div class="form-group">
				    <label for="sourceCode" class="col-sm-2 control-label">consumer.xml 名称 </label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" id="consumerName" name="consumerName"/>
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <label for="sourceName" class="col-sm-2 control-label">上传</label>
				    <div class="col-sm-10">
                       <input id="input-5" type="file" name="uploadJar" multiple class="file form-control" data-show-preview="false">
                        <script>
                        //$(function () {
                        	
                        	$("#input-5").fileinput({
                                showRemove: false,
                                uploadUrl:"${basePath}/sync/importJar.do",//上传的地址
                                uploadAsync: true,
                                language : "zh",//设置语言
                                showCaption: true,//是否显示标题
                                showUpload: false, //是否显示上传按钮
                                browseClass: "btn btn-primary", //按钮样式 
                                allowedFileExtensions: ["jar"], //接收的文件后缀
                                maxFileCount: 1,
                                showPreview: false,
                               
                                
                            }).on("fileuploaded", function(event, data) {
                            	alert(data.response.message);
								window.location.href="${basePath}/sync/syncTemplateList.do";
                               }).on('filepreajax', function(event, previewId, index) {
									 alert($("#consumerName").val());
                               });
                        //});
                            
                            
                           
                        </script>				   
                       </div>
				  </div>
				  
				 
				</form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<!--                 <button type="submit" class="btn btn-primary">保存</button>
 -->                <a href="javascript:void(0)"  id="importJar" class="btn btn-primary">保存</a>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!-- sync log -->
<input  type="hidden" name="objectId" id= "objectId">
    <input  type="hidden" name="objectType" id= "objectType">

    <div style="display:none;" class="modal fade bs-example-modal-lg in" id="logModel" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="false">  
        <div class="modal-dialog modal-lg">  
            <div class="modal-content" id="personAddModelContent">  
                <div class="modal-header">  
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>  
                    <span class="modal-header-title" id="myModalLabel">操作日志</span>  
                </div>  
      
            <div class="modal-body">  
                 <table class="table table-bordered table-hover">
            <thead>
            <tr class="bg-success">
						
						<th>创建时间</th>
						<th>操作人</th>
						<th>操作内容</th>
					
						
			</tr>
            </thead>
            <tbody id="comlogs">
				
            </tbody>
        </table>
            </div>  
            <div class="modal-footer" id="pagination">  
                   
            </div>  
        </div>  
        </div> 
    </div>
    
</div>
</body>
</html>
<script type="text/javascript">

$("#temListForm").find('textarea[name="sqlContent"]').val('${sqlContent}');

//$("input[name='syncTemplate_status']").bootstrapSwitch();

$('[name="syncTemplate_status"]').bootstrapSwitch({  
    onText:"开启",  
    offText:"关闭",  
    onColor:"success",  
    offColor:"info",  
    size:"normal",  
    onSwitchChange:function(event,state){    
        var id = $(this).attr("id");
        changeSyncTemplateStatus(id);
    },
    onInit:function(event,state){
    var id = $(this).attr("id");
    	if($(this).attr("value")=='true'){
    		 //$("#"+id).bootstrapSwitch('toggleState');
    	     //$("#"+id).bootstrapSwitch('state', false); // true || false
    	}else{
    		//$(this).bootstrapSwitch('toggleState');
    		//$(this).bootstrapSwitch('setState', true); // true || false
    	}
    }
}) 


//全选 （是/否）
function selectAll(){
	 var checklist = document.getElementsByName ("ids");
	   if(document.getElementById("zcheckbox").checked){
	   for(var i=0;i<checklist.length;i++){
	      checklist[i].checked = 1;
	   } 
	 }else{
	  for(var j=0;j<checklist.length;j++){
	     checklist[j].checked = 0;
	  }
	 }
}


$("#importJar").click(function(){
	$("#jar_file").ajaxSubmit({
		type: 'post',
		url:  '${basePath}/sync/importJar.do',
		dataType:  'json',
		success: function(data) {	
			if(data.success=="true"){
				alert("jar上传成功!");
				$('#myModal3').modal('hide');
			}else{
				alert("jar上传失败!");
				
			}
			    
			}
    });
})

</script>


